<template>
    <view class="bottom footer">
      <van-icon v-show="linePhoneFlg" @click="onLineClick" :name="linePhone" size="27px" />
      <van-icon v-show="!linePhoneFlg" @click="onLineClick" :name="lineBoard" size="27px" />
      <view class="flex1">
        <van-field ref="vaninput"  v-if="linePhoneFlg"    @keydown.enter.prevent="submitClick"
            enterkeyhint="send" v-model="inputValue" class="custom-border"  label="" placeholder="请输入你的问题或需求" />
        <div style="display: flex;place-content: center;" v-else>
          <van-icon  @click="onLuYinClick" :name="linePhone" size="27px" />
          <span class="fontColor">按住说话</span>
        </div>
      </view>
      <van-icon :name="zePhone" size="27px"  />
      <van-uploader>
        <van-icon :name="photo" size="27" style="margin-left: 8px;" />
      </van-uploader>
    </view>
  
  </template>
 
  <script lang="ts" setup >
  import linePhone from "@/assets/png/stLine-microphone-l 1.svg"
  import lineBoard  from "@/assets/png/riLine-keyboard-box-line 1.svg"
  import zePhone from "@/assets/png/ze-phone-o 1.svg"
  import photo from "@/assets/png/photo.svg"
  import { useContent,inputValue,vaninput } from "../hooks"
  const { linePhoneFlg,onLineClick,onLuYinClick,submitClick, } = useContent()

  </script>
  <style scoped lang="less">
 .bottom{
  padding: 0px 8px;
  height: 66px;
  display: flex;
  flex-direction: row;
  align-items: center;
  background-color: #fff;
 }
 .flex1{
  flex: 1;
  border-radius: 5px 5px 5px 5px;
  padding: 4px;
  border: 1px solid #9A9A9A;
  height: 32px;
  margin: 0 8px;
  box-sizing: border-box;
 }
 .fontColor{
  color: #9A9A9A;
  font-size: 16px;
 }
 /* 输入框 */
 .van-cell{
  padding: 0px;
  border-radius: 5px 5px 5px 5px;
 }
:deep(.van-field__control){
  text-indent:6px;
  font-size: 16px;
 }
 /* :deep(.van-field__control){
  
 } */

</style>
  
  